<template>
	<view class="container">
		<!-- 顶部状态区 -->
		<view class="status-section">
			<view class="status-icon">
				<image src="/static/success.png" mode="aspectFit" class="success-icon"></image>
			</view>
			<view class="status-text">
				<text class="status-title">行程已完成</text>
				<text class="status-desc">感谢您的使用</text>
			</view>
			<view class="price-display">
				<text class="price-symbol">¥</text>
				<text class="price-amount">{{orderInfo.price || '0.00'}}</text>
			</view>
		</view>

		<!-- 行程信息卡片 -->
		<view class="trip-card">
			<view class="route-info">
				<view class="route-point start">
					<view class="point-dot start-dot"></view>
					<text class="point-text">{{orderInfo.startAddress || '起点'}}</text>
				</view>
				<view class="route-line"></view>
				<view class="route-point end">
					<view class="point-dot end-dot"></view>
					<text class="point-text">{{orderInfo.endAddress || '终点'}}</text>
				</view>
			</view>
			
			<view class="trip-details">
				<view class="detail-item">
					<text class="detail-label">行程距离</text>
					<text class="detail-value">{{orderInfo.distence || '0'}}公里</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">司机师傅</text>
					<text class="detail-value">{{orderInfo.driverName || '暂无'}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">手机号</text>
					<text class="detail-value">{{orderInfo.driverPhone || '暂无'}}</text>
				</view>
			</view>
		</view>

		<!-- 费用明细卡片 -->
		<view class="fee-card">
			<view class="card-title">费用明细</view>
			<view class="fee-item">
				<text class="fee-label">里程费用</text>
				<text class="fee-value">¥{{orderInfo.price || '0.00'}}</text>
			</view>
			<view class="fee-item">
				<text class="fee-label">优惠金额</text>
				<text class="fee-value discount">-¥0</text>
			</view>
			<view class="fee-divider"></view>
			<view class="fee-item total">
				<text class="fee-label">实付金额</text>
				<text class="fee-value">¥{{orderInfo.price || '0.00'}}</text>
			</view>
		</view>

		<!-- 底部按钮区 -->
		<view class="bottom-actions">
			<button class="action-btn pay-btn" @tap="showPaymentModal">
				<text class="btn-text">立即支付 ¥{{orderInfo.price || '0.00'}}</text>
			</button>
		</view>
	</view>
</template>

<script>
	import orderApi from '@/api/order.js'
export default {
	data() {
		return {
			orderId: '',
			orderInfo: {
				driverName: null,
				driverPhone: null,
				startAddress: null,
				endAddress: null,
				price: null,
				distence: null,
				carNumber: null,
			},
		}
	},
	onLoad(options) {
		console.log('页面加载，接收到的参数：', options);
		if (options.orderId) {
			this.orderId = options.orderId;
			orderApi.getOrderInfo(this.orderId).then(res =>{
				const distence = this.getMapDistance(res.startLat/1000000,res.startLng/1000000,res.endLat/1000000,res.endLng/1000000);
				console.log(res)
				this.orderInfo = {
					driverName: res.name,
					driverPhone: res.phone,
					startAddress: res.startAddress,
					endAddress: res.endAddress,
					price: res.price,
					avatar:res.avatar,
					distence:distence
				}
				console.log(this.orderInfo,24423422535);
			}).catch(err=>{
				console.log(err);
			})
			console.log('当前订单信息：', this.orderInfo);
		}
		console.log(this.orderId)
		
	},
	mounted() {
		console.log('页面挂载完成，订单信息：', this.orderInfo);
	},
	methods: {
		//去首页
		goHome() {
			uni.switchTab({
				url: '/pages/firstPage/firstPage'
			});
		},
		// 显示支付弹窗
		showPaymentModal() {
			uni.showModal({
				title: '选择支付方式',
				content: `需支付 ¥${this.orderInfo.price}`,
				confirmText: '确认支付',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.processPayment();
					}
				}
			});
		},
		// 处理支付
		processPayment() {
			uni.showLoading({
				title: '支付处理中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 2000
				});
				
				setTimeout(() => {
					this.goHome();
				}, 2000);
			}, 1500);
		},
		//进行经纬度转换为距离的计算
		Rad(d) {
			return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
		},
		
		/*
		 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
		 默认单位km
		*/
		getMapDistance(lat1, lng1, lat2, lng2) {
			// console.log("in getMap")
			// console.log(lat1)
			var radLat1 = this.Rad(lat1);
			var radLat2 = this.Rad(lat2);
			var a = radLat1 - radLat2;
			var b = this.Rad(lng1) - this.Rad(lng2);
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
				Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137; // EARTH_RADIUS;
			s = Math.round(s * 10000) / 10000; //输出为公里
			s = s.toFixed(1);//保留一位小数
			console.log(s,11111111111111111111111111111);
			return s;
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 120rpx;
}

.status-section {
	background: linear-gradient(180deg, #1B6EF3 0%, #3C84FF 100%);
	padding: 40rpx 30rpx 60rpx;
	color: #fff;
	position: relative;
}

.status-icon {
	margin-bottom: 20rpx;
}

.success-icon {
	width: 80rpx;
	height: 80rpx;
}

.status-text {
	display: flex;
	flex-direction: column;
}

.status-title {
	font-size: 36rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 28rpx;
	opacity: 0.9;
}

.price-display {
	position: absolute;
	right: 40rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: baseline;
}

.price-symbol {
	font-size: 32rpx;
	margin-right: 4rpx;
}

.price-amount {
	font-size: 56rpx;
	font-weight: 500;
}

.trip-card {
	margin: -30rpx 20rpx 20rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}

.route-info {
	padding: 20rpx 0;
	position: relative;
}

.route-point {
	display: flex;
	align-items: center;
	margin: 20rpx 0;
}

.point-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.start-dot {
	background-color: #1B6EF3;
}

.end-dot {
	background-color: #FF3B30;
}

.route-line {
	position: absolute;
	left: 10rpx;
	top: 40rpx;
	bottom: 40rpx;
	width: 2rpx;
	background-color: #E5E5E5;
}

.point-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.trip-details {
	margin-top: 30rpx;
	padding-top: 30rpx;
	border-top: 1rpx solid #f0f0f0;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.detail-label {
	color: #666;
	font-size: 28rpx;
}

.detail-value {
	color: #333;
	font-size: 28rpx;
}

.fee-card {
	margin: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 30rpx;
	color: #333;
}

.fee-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.fee-label {
	color: #666;
	font-size: 28rpx;
}

.fee-value {
	color: #333;
	font-size: 28rpx;
}

.fee-value.discount {
	color: #FF3B30;
}

.fee-divider {
	height: 1rpx;
	background-color: #f0f0f0;
	margin: 20rpx 0;
}

.fee-item.total {
	margin-top: 20rpx;
}

.fee-item.total .fee-label,
.fee-item.total .fee-value {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	background: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.action-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: 500;
}

.pay-btn {
	background: #1B6EF3;
	color: #fff;
}

.btn-text {
	font-size: 32rpx;
}
</style>